<template>
    <div class="zhuce">
       <header class="header">
         <router-link to='shoujreg'>
             <div class="left">
              <img src=".././assets/img/BackIcon.png">
          </div>
         </router-link>
          
          <div class="center">手机注册</div>
          <div class="right">去登陆</div> 
       </header>
       <section class="section">
          <form class="form">
              <p class="tel">中国大陆(+86)</p>
              
              <p class="tel_num">
                  <input type="text" placeholder="请输入你的手机号">
              </p>
              <p class="tel_pwd">
                  <input type="password" placeholder="请输入你的密码">
              </p>
              
              <div class="reg">登录</div>
              
              <div class="tishi">忘记密码?</div>
              
          </form>
          
        
       </section>
       
       <footer class="footer">
           <div class="tishi">使用以下账号登录</div>
           <ul class="lianjie">
               <li class="list">
                   <img src="../assets/img/QQ.png">
               </li>
               
               <li class="list">
                   <img src="../assets/img/weibo.png">
               </li>
               <li class="list">
                   <img src="../assets/img/weixin.png">
               </li>
               <li class="list">
                   <img src="../assets/img/youjian.png">
               </li>
           </ul>
           
       </footer>
       
       
    </div>

</template>


<script>
import Swiper from '../../static/js/swiper.min.js'
export default {
  name: 'zhuce',
  data () {
    return {
      msg: ''
    }
  }
}
</script>




<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import '.././assets/css/reset.css';    
@import '.././assets/less/style.less';
@import '.././assets/css/swiper.css';    
    .header{
        .px2rem(height,100);
        .px2rem(line-height,100);
        display: flex;
        justify-content: center;
        align-items: center;
        .left{
            .padding-left(20);
        }
        .center{
            flex: 1;
            .padding-left(20);
        }
        .right{
            .font(24,white);
            .px2rem(height,50);
            .px2rem(line-height,50);
            .px2rem(width,90);
            .margin-right(20);
            .border-radius(5);
            text-align: center;
            background: #fe5b5c;
        }
    }
    
    
    .section{
        .form{
            .margin-top(50);
            
            p{
                .px2rem(height,90);
                .px2rem(line-height,90);
                .px2rem(width,600);
                .font-size(36);
                .border-radius(10);
                 margin: 0 auto;
                .margin-bottom(30);
                background: #eae8dc; 
                .padding-left(20);
                .webkit();
                input{
                    flex: 1;
                    border: none;
                    outline: none;
                    .padding-left(20);
                    background: #eae8dc;
                    
                }
            }
            
            .tel{
            
                background: #eae8dc;
            }
          
            .reg{
                
                .px2rem(height,90);
                .px2rem(line-height,90);
                .px2rem(width,600);
                .font-size(36);
                .border-radius(10);
                 margin: 0 auto;
                
                background: #eae8dc; 
                .padding-left(20);
                .margin-top(50);
                text-align: center;
                color: white;
                background: #969696;
                
            }
            
            
            .tishi{
                text-align: center;
                color: #b8b5ae;
                .px2rem(height,100);
                .px2rem(line-height,100);
                .font-size(24);
            }
        }

    }
    .footer{
        position: fixed;
        .bottom(30);
        text-align: center;
        margin: 0 auto;
        width: 100%;
        .tishi{
            text-align: center;
            .margin-bottom(30);
            color: #b8b5ae;
        }
        .lianjie{
            width: 100%;
            margin: 30px auto;
            display: flex;
            li{
               
                height: 86px;
                .px2rem(height,86);
                .px2rem(line-height,86);
                .px2rem(width,86);
                margin: 0 auto;
                background: url(../assets/img/qqB.png)
                 
            }
            
            li:nth-child(2){
                       background: url(../assets/img/weiboB.png) 
                }
             li:nth-child(3){
                       background: url(../assets/img/weiB.png) 
                }
             li:nth-child(4){
                       background: url(../assets/img/youB.png) 
                }
            
            
        }
        
        
        
    }
    
</style>